<template>
  <div class="page">
    <!-- search -->
    <div style="display: flex; align-items: center; padding: 6px 0; justify-content: space-between;
      " v-if="false">
      <div class="search" v-if="false">
        <i class="Icon" style="color: #74eb41; padding: 0 8px">search</i>
        <van-field type="text" label="" placeholder="Search" />
      </div>
      <div style="font-size: 32px; padding-left: 12px"></div>
    </div>

    <!-- 附近 -->
    <div class="topshop">
      <div style="display: flex;align-items: center;justify-content: space-between;margin-bottom: 12px;">
        <div style="font-size: 26px;">{{ $t("home.fj") }}</div>
        <i class="Icon" style="padding: 0 10px" @click="openScanner()">qr_code_scanner</i>
      </div>
      <van-swipe :show-indicators="false">
        <van-swipe-item v-for="(item, index) in topShop" :key="index">
          <div style="padding: 6px; background-color: #ffffff" @click="loadShopHandle()">
            <van-image :src="item.img" fit="cover" width="100%" height="160px"></van-image>
          </div>
        </van-swipe-item>
      </van-swipe>
    </div>

    <!-- 推荐 -->
    <div style="padding: 12px; background-color: #ffffff;">
      <div style="display: flex; align-items: center">
        <div style="font-size: 26px">{{ $t("home.tj") }}</div>
      </div>
      <div style="
          display: flex;
          align-items: center;
          overflow-x: auto;
          margin-top: 12px;
          width: calc(100vw - 64px);
        ">
        <div v-for="(item, index) in categories" :key="index" @click="loadShopHandle()">
          <div style="
              background-color: #ffffff;
              flex-shrink: 0;
              margin-right: 12px;
            ">
            <van-image :src="item.img" fit="cover" style="
                width: 270px;
                height: 140px;
                border-radius: 8px;
                overflow: hidden;
              ">
            </van-image>
          </div>
        </div>
      </div>
    </div>

    <!-- 分类 -->
    <div style="padding: 12px; background-color: #ffffff;">
      <div style="display: flex; align-items: center">
        <div style="font-size: 26px">{{ $t("home.fl") }}</div>
      </div>
      <div style="
          display: flex;
          align-items: center;
          overflow-x: auto;
          margin-top: 12px;
          width: calc(100vw - 64px);
        ">
        <div v-for="(item, index) in categories" :key="index" @click="loadShopListHandle()">
          <div style="
              background-color: #ffffff;
              flex-shrink: 0;
              margin-right: 12px;
              position: relative;
            ">
            <van-image :src="item.img" fit="cover" style="
                width: 270px;
                height: 140px;
                border-radius: 8px;
                overflow: hidden;
              ">
            </van-image>
            <div style="
                position: absolute;
                top: 6px;
                right: 6px;
                color: #ffffff;
                font-size: 14;
                width: 50px;
                height: 20px;
                text-align: center;
                border-top: 1px solid #ffffff;
                border-bottom: 1px solid #ffffff;
                line-height: 20px;
                background-color: #ffffff40;
              ">
              粤菜
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    mounted() { },
    data() {
      return {
        topShop: [
          {
            img: "https://a.cdn-hotels.com/gdcs/production81/d1651/277b6dcb-833e-474d-975a-d3924e1e4253.jpg?impolicy=fcrop&w=800&h=533&q=medium",
            name: "Aerotel Transit Hotel",
            desc: "Carmen Cheung一點也不體諒及即時提出協助。 由於本人訂酒店時選了12時stay+3 hrs lounge",
          },
          {
            img: "https://a.cdn-hotels.com/gdcs/production40/d1052/52093590-9f56-42c5-a147-1770c0fcd493.jpg?impolicy=fcrop&w=400&h=267&q=medium",
            name: "特拉皮扎",
            desc: "麵食、沙拉、小吃和甜點。雞尾酒和啤酒的種類繁多，不喝酒的人也可以品嚐一些美味的綜合果汁。特拉皮扎坐落在西樂索海灘的棕櫚樹裡",
          },
        ],
        categories: [
          {
            img: "https://i3.meishichina.com/attachment/recipe/2022/03/04/2022030416463792861541.jpg",
            name: "热菜",
          },
          {
            img: "https://i3.meishichina.com/attachment/recipe/2022/03/02/2022030216461901566651.jpg",
            name: "主食",
          },
          {
            img: "https://i3.meishichina.com/attachment/recipe/2022/02/27/2022022716459495995881.jpg",
            name: "甜点",
          },
          {
            img: "https://i3.meishichina.com/attachment/recipe/2022/02/21/2022022116454371041591958079.jpg",
            name: "饮料",
          },
          {
            img: "https://i3.meishichina.com/attachment/recipe/2022/01/19/2022011916425790245511958079.jpg",
            name: "中式",
          },
        ],
        foods: [
          {
            name: "肉食动物的“速食面”",
            img: "https://st-cn.meishij.net/r/11/139/5472261/a5472261_149964776033043.jpg",
            desc: "肉食动物的“速食面”",
          },
          {
            name: "肉食懒人的福利—酱烤鸡腿肉",
            img: "https://st-cn.meishij.net/r/138/164/8978638/a8978638_149506240495837.jpg",
            desc: "肉食懒人的福利—酱烤鸡腿肉",
          },
          {
            name: "肉食主义--韩式烤牛肉三明治",
            img: "https://st-cn.meishij.net/r/42/124/4031042/a4031042_146561597506698.jpg",
            desc: "肉食主义--韩式烤牛肉三明治",
          },
          {
            name: "「肉食系」红烧冬瓜",
            img: "https://st-cn.meishij.net/r/27/211/8490277/a8490277_147581221538086.jpg",
            desc: "「肉食系」红烧冬瓜",
          },
          {
            name: "鸡肉食材怎么做好吃 藤椒麻辣口感调味",
            img: "https://st-cn.meishij.net/r/82/136/13784082/a13784082_159134848535800.jpg",
            desc: "鸡肉食材怎么做好吃 藤椒麻辣口感调味",
          },
          {
            name: "酥香牛肉饼 宝宝辅食食谱",
            img: "https://st-cn.meishij.net/r/178/85/5833928/a5833928_154174882551788.jpg",
            desc: "酥香牛肉饼  宝宝辅食食谱",
          },
          {
            name: "补铁芝麻肉丝 宝宝辅食食谱",
            img: "https://st-cn.meishij.net/r/178/85/5833928/a5833928_151600473163323.jpg",
            desc: "补铁芝麻肉丝 宝宝辅食食谱",
          },
          {
            name: "牛肉条小食【宝宝辅食】",
            img: "https://st-cn.meishij.net/r/178/85/5833928/a5833928_163143732538925.jpg",
            desc: "牛肉条小食【宝宝辅食】",
          },
          {
            name: "糖醋排骨丨肉食主义的私人订制",
            img: "https://st-cn.meishij.net/r/38/160/10290038/a10290038_150391218631962.jpg",
            desc: "糖醋排骨丨肉食主义的私人订制",
          },
          {
            name: "鲜味肉饼汤 宝宝辅食食谱",
            img: "https://st-cn.meishij.net/r/178/85/5833928/a5833928_160144898786873.jpg",
            desc: "鲜味肉饼汤  宝宝辅食食谱",
          },
        ],
      };
    },
    methods: {
      loadShopHandle() {
        this.$router.push({
          path: "/shop",
        });
      },
      loadShopListHandle() {
        this.$router.push({
          path: "/shoplist",
        });
      },

      openScanner() {
        let { QRScanner } = window;
        // 初始插件
        QRScanner.prepare(this.initScanner);

        // 加入掃描結束事件
        QRScanner.scan(this.scanComplete);

        // 取得狀態，僅在有權限時才開啟鏡頭
        QRScanner.getStatus((status) => {
          if (status.authorized) {
            QRScanner.show();
            this.qrCodeValue = "";
            this.isShowScanner = true;
          }
        });
      },

      hideScanner: function () {
        let { QRScanner } = window;
        QRScanner.destroy();
        this.isShowScanner = false;
      },


      initScanner: function (err, status) {
        let { QRScanner } = window;
        if (err) {
          // here we can handle errors and clean up any loose ends.
          const { name, _message } = err;
          if (name === "CAMERA_ACCESS_DENIED") {
            alert(_message);
            QRScanner.openSettings();
          }
          console.error(err);
        }

        if (status.authorized) {
          console.log("authorized");
          // W00t, you have camera access and the scanner is initialized.
          // QRscanner.show() should feel very fast.
        } else if (status.denied) {
          alert("No permission to use camera.");
          QRScanner.openSettings();
          // The video preview will remain black, and scanning is disabled. We can
          // try to ask the user to change their mind, but we'll have to send them
          // to their device settings with `QRScanner.openSettings()`.
        } else {
          alert("Something wrong!!");
          // we didn't get permission, but we didn't get permanently denied. (On
          // Android, a denial isn't permanent unless the user checks the "Don't
          // ask again" box.) We can ask again at the next relevant opportunity.
        }
      },


      scanComplete: function (err, text) {
        if (err) {
          console.log("displaycontents error:", err);
        } else {
          console.log("text is", text);
          this.hideScanner();
        }
      },

    },
  };
</script>


<style scoped>
  .page {
    background-color: #ffffff;
    padding: 12px;
    padding-top: 20px;
  }

  .search {
    flex: 1;
    display: flex;
    align-items: center;
    border: 1px solid #ebebeb;
    background-color: #ffffff;
    height: 35px;
    overflow: hidden;
  }

  .topshop {
    margin-top: 12px;
    width: calc(100vw - 48px) !important;
    background-color: #fff;
    padding: 12px;
  }
</style>